<template>

  <div class="box">
      <!-- 头像信息 -->
      <div class="info">
          <img :src="commentData.user.head_img  | fixImgUrl" alt="" class="avater">
          <div class="middle">
              <div class="name">{{commentData.user.nickname ||commentData.user.username}}</div>
              <div class="date">2小时前</div>
          </div>
          <div class="btn" @click="sendComment">回复</div>
      </div>
      <!-- 如果有parent子组件 -->
      <Parent :parentData="commentData.parent" v-if="commentData.parent"/>
      <!-- 评论内容 -->
      <div class="mainContent">
          {{commentData.content}}
      </div>
      
  </div>
</template>

<script>
import Parent from '../components/Parent'
import eventBus from '../utils/eventBus'
export default {
    props:[
        "commentData"
    ],
    components:{
        Parent,
    },
    methods:{
        sendComment(){
            //引入了一个eventBus vue实例
            //可以用$emit 给这个实例触发事件
            eventBus.$emit('sendMsg',this.commentData.id);
        }
    }

}
</script>

<style lang="less" scoped>
    .box{
        padding: 10/360*100vw;
        border-bottom: 1px solid #ccc;
        .info{
            display: flex;
            .avater{
                width: 35/360*100vw;
                height: 35/360*100vw;
                border-radius: 50%;
                object-fit: cover;
                align-items: center;
                margin-bottom: 4/360*100vw;
            }
            .middle{
                flex: 1;
                padding-left: 10/360*100vw;
                font-size: 16/360*100vw;
                color:#333;
                .date{
                    font-size: 14/360*100vw;
                    color:#888;
                }
            }
        }
        .btn{
            font-size: 14/360*100vw;
            color:#888;
        }
        .mainContent{
            font-size: 16/360*100vw;
            color:#333;
            margin-top: 6/360*100vw;
        }
    }

</style>